<template>
  <div class="home">
    <div class="body">
        <div class="arbitrage-w">
              <table border="1" cellspacing="1" v-html="tableDom">
                <tbody></tbody>
              </table>
            </div>
    </div>
  </div>
</template>

<script>
import Mixin from '@/components/mixin'
import {getArbitrage} from '@/api/materiel' // 接口
import {getShelfMaterielListByScreen} from '@/api/sreen'

export default {
  name: 'demo',
  data () {
    return {
      carouselArr: [],
      realIndex: 0,
      tableDom: ''
    }
  },
  mixins: [Mixin], // demo.vue 中声明minix 进行混合
  computed: {

  },
  components: {},
  methods: {
      // 渲染table dom
    getGoodKWLocation (data) {
      let vm = this
      // 根据货架标识读取库位列表
      vm.tableDom = ''
      let htmlTr = ''
      if (data != null) {
        var dataList = data.GoodKWLocation
        for (let i = 1; i <= data.MaxLineID + 1; i++) {
          let _temp =
            data.MaxLineID - i + 1 === 0
              ? ''
              : data.MaxLineID - i + 1 + '层'
          htmlTr += '<tr><td>' + _temp + '</td>'
          for (let j = 1; j <= data.MaxColumnID; j++) {
            if (data.MaxLineID === i - 1) {
              htmlTr += '<td>' + j + '</td>'
            }
            var tdItemList = dataList.filter((_item) => {
              return _item.LineID === i && _item.ColumnID === j
            })

            if (tdItemList != null && tdItemList.length > 0) {
              htmlTr +=
                '<td StockPlaceID="' +
                tdItemList[0].StockPlaceID +
                '"ShelfFlnkID="' +
                tdItemList[0].ShelfFlnkID +
                '" class="tdBody" style="' +
                (tdItemList[0].RowSpan > 1 || tdItemList[0].ColSpan > 1
                  ? 'background-color:#00438a;'
                  : '') +
                '" isselected="0" floorid="' +
                tdItemList[0].FloorID +
                '" colid="' +
                tdItemList[0].ColID +
                '" lineid="' +
                tdItemList[0].LineID +
                '" columnid="' +
                tdItemList[0].ColumnID +
                '" rowspan="' +
                tdItemList[0].RowSpan +
                '" colspan="' +
                tdItemList[0].ColSpan +
                '"ondragover="allowDrop(event)"' +
                'ondrop="selectTd(this);">' +
                tdItemList[0].FloorID +
                '-' +
                tdItemList[0].ColID +
                '</td>'
            }
          }
          htmlTr += '</tr>'
        }
      }
      vm.tableDom = htmlTr
      vm.setArbitrage()
    },
    getArbitrage () {
      let vm = this
      let params = new FormData()
      params.append('ShelfFlnkID', vm.getLocalStorage('ShelfFlnkID'))
      getArbitrage(params).then((response) => {
        if (response.data) {
          vm.getGoodKWLocation(response.data)
        }
      })
    },
    // 往table里面渲染数据
    setArbitrage (flnkID) {
      let vm = this
      let params = new FormData()
      params.append('ShelfFlnkID', vm.getLocalStorage('ShelfFlnkID'))
      getShelfMaterielListByScreen(params).then((response) => {
        if (response.data.result) {
          response.data.data.map((item) => {
            let td = `
              <p style="font-size:0.38rem">${item.CustomerName}</p>
              <p style="font-size:0.38rem">${item.StyleName}</p>
              <p style="font-size:0.38rem">${item.MaterielClassName}</p>
              `
            let dom = document.querySelector(
                ".arbitrage-w tbody tr td[stockplaceid='" +
                  item.WarehouseKWFlnkID +
                  "']"
              )
            if (dom !== null) {
              if (item.Tag === 0) {
                dom.innerHTML = td
                dom.style.backgroundColor = 'rgba(0,0,0,0)'
              }
              if (item.Tag === 1) {
                dom.innerHTML = td
                dom.style.backgroundColor = '#fd7a4f'
              }
            }
          })
        }
      })
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.getArbitrage()
    vm.setInterval = setInterval(() => {
      vm.getArbitrage()
    }, 5000)
  },
  beforeDestroy: function () {
    let vm = this
    clearInterval(vm.setInterval)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import "~@/css/sreen/locationSreen.scss";
</style>
